<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin:
      0;
    padding:
      0;
  }
</style>

<body>
  <button id="a1">我要留言</button>
  <table id="ss1">
    <tr>
      <th>ID</th>
      <th>标题</th>
      <th>留言人</th>
      <th>内容</th>
      <th>时间</th>
      <th>操作</th>
    </tr>
    <tr>
      <th>1</th>
      <th>哈撒给</th>
      <th>小胖</th>
      <th>认真考试</th>
      <th>2022-3-25</th>
      <th><button>删除</button></th>
    </tr>
    <tr>
      <th>2</th>
      <th>奥利给</th>
      <th>大胖</th>
      <th>认真考试</th>
      <th>2022-3-25</th>
      <th><button>删除</button></th>
    </tr>
  </table>

  <div id="box" style="width: 260px; height: 200px;display: none; margin: auto;position: absolute; top: 0px; left: 500px;background-color: blanchedalmond;">
    <h1>发布留言</h1><br />
    标题：<input type="text" id="g1"><br />
    留言人：<input type="text" id="g2"><br />
    留言内容：<input type="text" id="g3"><br>
    <button id="ss2">关闭</button><button id="g4">发布</button>
  </div>

</body>
<script>
  window.onload = function () {
    var f1 = new XMLHttpRequest()
    f1.open('GET', ' https://liu.zzgoodqc.cn/lyb')
    f1.onreadystatechange = function () {
      console.log(f1.status);
      console.log(f1.readyState);
      if (f1.readyState == 4 && f1.status == 200) {
        var tt = JSON.parse(f1.responseText)
        console.log(tt.data);
        var b = document.getElementById('ss1')
        var s = ''
        for (var a = 0; a < tt.data.length; a++) {
          s += `<tr>
                        <th>${tt.data[a].id}</th>
                        <th>${tt.data[a].name}</th>
                        <th>${tt.data[a].title}</th>
                        <th>${tt.data[a].content}</th>
                        <th>${tt.data[a].updated_at}</th>
                        <th><button>删除</button></th>
                    </tr>`
        }
        b.innerHTML = s
      }
    }
    f1.send()
    a1.onclick = function () {
      box.style.display = "block";

    }
    f1.onclick = function () {
      var obj = {
        ID: "1",
        biaoti: "课程",
        liuyanren: "小明",
      }
      // console.log(q[obj]);
    }

    ss2.onclick = function () {
      box.style.display = "none";
    }

  }

  g4.onclick = function fun() {
    var username = document.getElementById('g1').value,
      password = document.getElementById('g2').value,
      ww = document.getElementById('g3').value
    var xmlHttp = new XMLHttpRequest()
    xmlHttp.open('POST', 'https://liu.zzgoodqc.cn/lyb/add')
    xmlHttp.setRequestHeader(
      'Content-type',
      'application/x-www-form-urlencoded'
    )
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var resData = JSON.parse(xmlHttp.responseText)
        if (resData.code == 200) {
          alert("成功")
        } else {
          alert("失败")
        }
      }
    }

    xmlHttp.send(`title=${username}&content=${password}&name=${ww}`)
  }
</script>
</script>

</html>